<template>
  <div>

    <div style="width:100%;height:auto;background-color:#ebf3fd;padding:100px">
      <a id="topAnchor" href="#"></a>
      <div class="content-box" v-if="flag">

        
        
          <h1 class="header-title">富表模版需求收集</h1>
          <p class="header-subtitle">
            为了给您提供更加贴合需求的素材模版，希望您能抽出几分钟时间，将您的感受和建议告诉我们，
            我们非常重视每位用户的宝贵意见，期待您的参与！现在我们就马上开始吧！
          </p>
          <el-form ref="form" :model="form" class="question" :rules="rules">
            <el-row>
              
              <el-col :span="24">
                <el-form-item label="01 您需要什么行业的可视化模版" prop="templateType">
                    <el-radio-group v-model="form.templateType">
                      <el-radio
                        v-for="dict in templateTypeOptions"
                        :key="dict.dictValue"
                        :label="dict.dictValue"
                      >{{dict.dictLabel}}</el-radio>
                    </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="02 您对模版的要求是？" prop="templateDemand">
                    <el-radio-group v-model="form.templateDemand">
                      <el-radio
                        v-for="dict in templateDemandOptions"
                        :key="dict.dictValue"
                        :label="dict.dictValue"
                      >{{dict.dictLabel}}</el-radio>
                    </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="03 您的岗位是？" prop="postType">
                    <el-radio-group v-model="form.postType">
                      <el-radio
                        v-for="dict in postTypeOptions"
                        :key="dict.dictValue"
                        :label="dict.dictValue"
                      >{{dict.dictLabel}}</el-radio>
                    </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="04 您的模版的具体需求？" prop="demandDesc">
                    <el-input type="textarea" v-model="form.demandDesc" rows="5"></el-input>
                </el-form-item>
              </el-col>            
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button type="primary" @click="submitForm" style="width:220px">提 交</el-button>
          </div>
        

      </div>
      <div v-if="!flag" style="text-align: center;margin-top: 150px;font-size: 30px;height: 400px;">
        <div>
          <img src="./image/file.png" alt="">
        </div>
        <div style="display:flex;margin-top: 20px;">
          <div style="width: 55%;text-align: right;">感谢您的参与</div>

          <div><img src="./image/smile.png"></div>
          
        </div>
        
      </div>
    
    </div>
    
    <Footer />
  </div>
</template>
<script>

import '../../assets/styles/cms/cmsstyle.scss'
import { addQuestion } from "@/api/tool/datav/demandQuestion"
import Footer from "@/views/cms/components/Footer";

export default {
  components: {
    Footer,
  },
  data() {
    return {
      //字典模板类型数据
      templateTypeOptions:[],
      //字典模板需求数据
      templateDemandOptions:[],
      //字典模板岗位数据
      postTypeOptions:[],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        templateType: [
          { required: true, message: "这道题未回答", trigger: "blur" }
        ],
        templateDemand: [
          { required: true, message: "这道题未回答", trigger: "blur" }
        ],
        postType: [
          { required: true, message: "这道题未回答", trigger: "blur" }
        ],
        demandDesc: [
          { required: true, message: "这道题未回答", trigger: "blur" }
        ],
      },
      //问卷内容展示
      flag:true,
    }
  },
  created() {
    this.getDicts("cms_template_type").then(response => {
      this.templateTypeOptions = response.data;
    });

    this.getDicts("cms_template_demand").then(response => {
      this.templateDemandOptions = response.data;
    });

    this.getDicts("cms_post_type").then(response => {
      this.postTypeOptions = response.data;
    });
  },
  methods:{
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
            addQuestion(this.form).then(response => {
              if (response.code === 200) {
                document.getElementById("topAnchor").click();
                this.flag = false;
              } else {
                this.msgError(response.msg);
              }
            });
        }
      });
    },
  }
};
</script>

<style scoped>
.content-box{
  width: 1000px;
  margin: 0 auto;
  position: relative;
  padding: 34px 72px 84px;
  background-color: rgba(255,255,255,1);
}
.header-title{
  text-align: center;
  margin-top: 40px;
  font-size: 30px;
  font-weight: normal;
  word-break: break-word;
}
.header-subtitle{
  margin-top: 40px;
  font-size: 16px;
  word-break: break-word;
  line-height: 24px;
}
.question-list{
  display: flex;
  flex-direction: column;
}
::v-deep .question .el-form-item__label {
  width:100%;
  text-align: left;
  vertical-align: middle;
  float: left;
  font-size: 18px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}
::v-deep .question .el-radio-group {
    width: 100%;
    display: flex;
    flex-direction: column;
}
::v-deep .question .el-radio-group .el-radio {
    color: #606266;
    font-weight: 400;
    line-height: 1;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    outline: none;
    font-size: 36px;
    margin-right: 30px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
</style>
